<template>
    <div class="itemImg" style="position: relative">
        <img :src="imgUrl" class="img"/>
        <svg class="icon" aria-hidden="true" @click="deletePic">
            <use xlink:href="#icon-chahao"></use>
        </svg>
    </div>
</template>

<script type="text/ecmascript-6">
    import Public from '@/assets/js/public';

    export default {
        /** kebab-case */
        name: 'item-img-loader',

        data() {
            return {};
        },
        /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
         String/Number/Boolean/Function/Object/Array/Symbol */
        props: {
            imgUrl: {
                required: true,
                type: String
            },
            index: {
                required: true,
                type: Number
            }
        },

        components: {},

        methods: {
            getIcon(icon) {
                return Public.ossImg + icon + '.svg';
            },
            deletePic() {
                this.$emit('onDeleteClick', this.index);
            }
        },
        computed: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl";
    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()

    .itemImg {
        width: vw(60)
        height: vw(60)
    }

    .img
        width 100%
        height 100%
        border-radius vw(8)

    .icon
        width 4vw
        height: 4vw
        position absolute
        top 0
        right 0
</style>
